<!--项目文档弹窗-->
<template>
	<el-dialog
		v-model="state.visible"
		title="详细信息"
		width="80%"
		@close="emitClose"
	>
		<!--			用户信息区域-->
		<el-card style="width: 100%;margin-bottom: 10px" shadow="never">
			<template #header>
				<div class="card-header"><span>用户名片</span></div>
			</template>
			<el-row :gutter="20" style="height: 30px">
				<el-col :span="6"><el-avatar :size="50" :src="props.userInfo.imageUrl" /></el-col>
				<el-col :span="6">用户昵称：{{props.userInfo.nickName}}</el-col>
				<el-col :span="6">手机号：{{props.userInfo.cellPhone}}</el-col>
				<el-col :span="6">用户编号：{{props.userInfo.id}}</el-col>
			</el-row>
		</el-card>
		<!--			项目区域-->
		<el-card style="max-width: 100%;margin-bottom: 10px">
			<template #header>
				<div class="card-header">
					<span>项目详情</span>
				</div>
			</template>
			<el-row >
				<el-col :span="24">
					<el-descriptions :column="3" border>
						<el-descriptions-item label="项目编号" label-align="left" align="center" width="80px">
							{{ props.projectInfo.code }}
						</el-descriptions-item>
						<el-descriptions-item label="项目名称" label-align="left" align="center" width="260px">
							{{ props.projectInfo.projectName }}
						</el-descriptions-item>
						<el-descriptions-item label="创建时间" label-align="left" align="center" width="180px">
							{{ props.projectInfo.createTime }}
						</el-descriptions-item>
						<el-descriptions-item label="项目类型" label-align="left" align="center" width="180px">
							{{getLabelByValue( props.projectInfo.projectType) }}
						</el-descriptions-item>
						<el-descriptions-item label="总金额" label-align="left" align="center" width="180px">
							￥<span style="color: #e85959">{{ props.projectInfo.amount }}</span>
						</el-descriptions-item>
						<el-descriptions-item label="项目整体进度" label-align="left" align="center" width="180px">
							<el-tag type="primary" v-if="props.projectInfo.status ===0">未审核</el-tag>
							<el-tag type="primary" v-else-if="props.projectInfo.status === 1">进行中</el-tag>
							<el-tag type="primary" v-else-if="props.projectInfo.status === 2">已完成</el-tag>
							<el-tag type="primary" v-else>未知进度</el-tag>
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
			</el-row>
		</el-card>
		<!--			支付种类区域-->
		<el-card style="max-width: 100%;margin-bottom: 10px">
			<template #header>
				<div class="card-header">
					<span>支付种类</span>
				</div>
			</template>
			<el-row style="padding-bottom: 10px">
				<el-col :span="24">
					<el-button type="primary">创建支付</el-button>
					<el-button type="primary" @click="state.manualDialogVisible = true">手动录入</el-button>
				</el-col>
			</el-row>
			<el-table :data="props.orderList" border style="width: 100%">
				<el-table-column prop="date" label="订单编号" width="180" />
				<el-table-column prop="name" label="支付金额" width="180" />
				<el-table-column prop="name" label="支付方式" width="180" />
				<el-table-column prop="name" label="支付时间" width="180" />
				<el-table-column prop="address" label="支付备注" />
				<el-table-column label="操作" align="center">
					<template #default="props">
						<el-button link type="primary" size="small" @click="completion(props.row)">补全项目</el-button>
						<el-button link type="primary" size="small" @click="info(props.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>

		</el-card>
		<!--			文档区域-->
		<el-card style="max-width: 100%;margin-bottom: 10px">
			<template #header>
				<div class="card-header">
					<span>文档种类</span>
				</div>
			</template>
			<el-row style="padding-bottom: 10px">
				<el-col :span="24">
					<el-button type="primary" @click="state.documentDialogVisible = true" >添加文档</el-button>
				</el-col>
			</el-row>
			<el-table :data="props.projectInfo.proProjectDocsList" border style="width: 100%">
				<el-table-column prop="id" label="文档编号" width="180" />
				<el-table-column prop="projectName" label="文档名称" />
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column label="操作" align="center">
					<template #default="props">
						<el-button link type="primary" size="small" @click="view(props.row)">查看</el-button>
						<el-button link type="primary" size="small" @click="completion(props.row)">修改</el-button>
						<el-button link type="primary" size="small" @click="del(props.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<template #footer>
      <span class="dialog-footer">
				<el-button  @click="emitClose()">确 定</el-button>
			</span>
		</template>
	</el-dialog>

	<!--		添加文档弹窗-->
	<el-dialog v-model="state.documentDialogVisible" title="添加文档" width="50%">
		<el-form  :model="state.documentFrom" label-width="auto" >
			<el-form-item v-model="state.documentFrom.url">
				<el-upload style="width: 100%;" drag action="https://xunyingcloud.cn/xcp/api/file/upload?type=6" multiple :limit="1" :on-success="fileSuccess" accept=".doc,.pdf">
					<el-icon class="el-icon--upload"><upload-filled /></el-icon>
					<div class="el-upload__text">将文件拖放到此处或 <em>点击 上传</em></div>
					<template #tip><div class="el-upload__tip">word/pdf且不能大于50M</div></template>
				</el-upload>
			</el-form-item>
			<el-form-item ><el-input v-model="state.documentFrom.projectName"  placeholder="请输入所属名称"/></el-form-item>
			<el-form-item ><el-input  v-model="state.documentFrom.format"  placeholder="文件格式"/></el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="state.documentDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="addDocumentBtn">确定</el-button>
			</div>
		</template>
	</el-dialog>
	<!--		查看文档-->
	<el-dialog v-model="state.viewDialogVisible" title="查看文档" width="50%">
		<iframe style="width: 100%;height: 60vh" :src="state.path"></iframe>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="state.viewDialogVisible = false">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { UploadProps } from 'element-plus'
const props = defineProps({
	visible: {
		// 参数类型
		type: Boolean,
		// 参数默认值
		default: false
	},
	userInfo:{},
	projectInfo:{},
	orderList:[]
});
// 监听 visible prop 的变化
watch(() => props.visible, (newVal) => {
	state.visible = newVal;  // 同步 visible 的值
});

const  emits = defineEmits(['close-dialog'])
// 定义映射关系对象
const optionsMap:any = {
	1: "毕设",
	2: "论文",
	3: "课设",
	4: "作业",
	5: "考试",
	6: "报告",
	7: "项目",
	8: "毕业全套"
};
const state =reactive(<any>{
	visible:false,
	documentDialogVisible:false,
	viewDialogVisible:false,
	documentFrom:{},
	path:"",
	projectList:[]
})
const docList = () => {
  http.get(`/api/admin/project/doc/${props.projectInfo.id}`).then(res =>{
		props.projectInfo.proProjectDocsList = res.data
	})
}
/**
 * 查看文档
 */
function view(data:any) {
	http.get(`/api/admin/project/view?url=${data.projectPath}`,).then(res =>{
		state.viewDialogVisible = true
		state.path = res.msg
	})
}
/**
 * 添加文档
 */
function addDocumentBtn() {
	state.documentFrom.projectId = props.projectInfo.id
	state.documentFrom.code = props.projectInfo.code
	state.documentFrom.providerId = props.projectInfo.providerId
	http.post("/api/admin/project/add",state.documentFrom).then(() =>{
		docList()
		state.documentDialogVisible = false
	})
}
/**
 * 删除文档
 * @param data
 */
function del(data:any) {
	http.delete(`/api/admin/project/delete/${data.id}`).then(res =>{
		docList()
		toast.success("删除成功")
	})
}
/**
 * 项目类型转换
 * @param value
 */
function getLabelByValue(value: number): string {
	return optionsMap[value] || "未知"; // 如果未找到对应的 label，返回 "未知"
}
//成功更换上传钩子
const fileSuccess: UploadProps['onSuccess'] = (response) => {
	state.documentFrom.projectPath = response.data.url
	state.documentFrom.projectName = response.data.fileName
	state.documentFrom.format = response.data.fileName.split(".").at(-1)
};
function emitClose() {
	emits('close-dialog');
}
</script>

<style scoped>

</style>
